<template>
  <div class="hello">
    <div class="hello-header">
      <el-page-header
        style="line-height: 60px; margin-left: 20px"
        @back="goBack"
        :content="this.name"
      >
      </el-page-header>
      <!-- <el-button class="hello-header-btn" type="warning" icon="el-icon-star-off" circle></el-button> -->
      <el-button
        @click="onFavorite"
        type="warning"
        class="hello-header-btn"
        plain
        >收藏</el-button
      >
    </div>
    <!-- <iframe id="ksd-video-iframe" src="//player.bilibili.com/player.html?aid=68373450&amp;bvid=BV12J41137hu&amp;cid=118499718&amp;page=1&amp;as_wide=1&amp;high_quality=1&amp;danmaku=0&amp;t=1" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe> -->
    <iframe
      class="frame"
      :src="this.src"
      scrolling="no"
      border="0"
      frameborder="no"
      framespacing="0"
      allowfullscreen="true"
      sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
    >
    </iframe>
  </div>
</template>

<script>
import GLOBAL from "@/api/global_var";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      name: this.$route.params.res.name,
      src:
        "http:" +
        this.$route.params.res.url +
        "&as_wide=1&high_quality=1&danmaku=0",
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onFavorite() {
      console.log(this.$route.params.res);
      GLOBAL.Favorite.unshift({
        name: this.$route.params.res.name,
        url: this.$route.params.res.url,
        cover:
          "http://i0.hdslb.com/bfs/archive/d7f0c41f1642a305f2f8ee7d73fd1e2901b465d4.jpg",
      });
      console.log(GLOBAL.Favorite)
      this.$message({
        message: "收藏成功",
        type: "success",
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.frame {
  width: 100%;
  height: calc(100vh - 140px);
}
.hello-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  &-btn {
    margin: 10px;
    // width: 10vh;
    // height: 10vh;
  }
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
